<template>
  <el-popover
    ref="popoverRef"
    :width="props.width"
    :show-arrow="false"
    placement="bottom-start"
    trigger="click"
    @before-enter="visible = true"
    @before-leave="visible = false"
  >
    <template #reference>
      <MerakIcon :class="['merak-table-expand', visible ? 'merak-table-expand--open' : '']" size="20" @click="emit('change')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
        </svg>
      </MerakIcon>
    </template>
    <slot />
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref, watch } from "vue";

import { ElPopover } from "element-plus";

import MerakIcon from "../MerakIcon/index.vue";

const props = defineProps<{
  visible: boolean;
  width?: number;
}>();

const emit = defineEmits<{
  change: [];
}>();

const visible = ref(false);

const popoverRef = ref();

watch(
  () => props.visible,
  () => {
    if (!props.visible) {
      unref(popoverRef)?.hide();
    }
  }
);
</script>

<style scoped lang="scss"></style>
